<template>
  <div>
      <!--工具栏-->
    <div class="toolbar" style="padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item label="时间范围">
            <el-date-picker
                v-model="filters.时间范围"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="渠道">
            <el-select v-model="filters.渠道">
                <el-option label="全部" value="0"></el-option>
                <el-option label="BBC"  value="1"></el-option>
                <el-option label="网易"  value="2"></el-option>
                <el-option label="苏宁"  value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="商家">
            <el-select v-model="filters.商家">
                <el-option label="王思副业" value="0"></el-option>
                <el-option label="李武渔业"  value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="店铺">
            <el-select v-model="filters.店铺">
                <el-option label="王思副业超市" value="0"></el-option>
                <el-option label="李武渔业分渔"  value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"/>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="报表" name="first">
                <!-- 表格 -->
                <div class="tableDiv">
                    <table border= "1" width="100%" style="border-collapse:collapse">
                        <tr>
                            <td>
                                商家
                            </td>
                            <td>
                                类目
                            </td>
                            <td colspan="5">
                                成交商品数
                            </td>
                            <td colspan="5">
                                成交商品占比
                            </td>
                            <td colspan="5">
                                成交商品金额
                            </td>
                            <td colspan="5">
                                成交金额占比
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="10">
                                全平台
                            </td>
                            <td rowspan="5">
                            全类目
                            </td>
                            <td rowspan="2">
                                合计
                            </td>
                            <td rowspan="2">
                                9
                            </td>
                            <td>
                                占比
                            </td>
                            <td>
                            环比
                            </td>
                            <td>
                                年同比
                            </td>
                            <td rowspan="2">
                                合计
                            </td>
                            <td rowspan="2">
                            100% 
                            </td>
                            <td>
                                占比
                            </td>
                            <td>
                                环比
                            </td>
                            <td>
                                年同比
                            </td>
                            <td rowspan="2">
                            合计 
                            </td>
                            <td rowspan="2">
                                5.64
                            </td>
                            <td>
                                占比
                            </td>
                            <td>
                            环比 
                            </td>
                            <td>
                                年同比
                            </td>
                            <td rowspan="2">
                            合计 
                            </td>
                            <td rowspan="2">
                            100% 
                            </td>
                            <td>
                            占比 
                            </td>
                            <td>
                            环比  
                            </td>
                            <td>
                                年同比
                            </td>
                        </tr>
                        <tr>
                            <td>
                            100%
                            </td>
                            <td>
                            <i style="color:red">↑</i>28.57%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                <!-- 100% -->
                                --
                            </td>
                            <td>
                                0%
                                <!-- 100% -->
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                100%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-89.53%
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                0%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                            BBC
                            </td>
                            <td>
                                9
                            </td>
                            <td>
                            100%
                            </td>
                            <td>
                                <i style="color:red">↑</i>28.57%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                            BBC
                            </td>
                            <td>
                                100%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                <i style="color:red">↑</i>28.99%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                BBC
                            </td>
                            <td>
                            5.64
                            </td>
                            <td>
                                100%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-89.53%
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                                BBC
                            </td>
                            <td>
                            100%
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                            <i style="color:#2d9b00">↓</i>-89.53%
                            </td>
                            <td>
                            -- 
                            </td>
                        </tr>
                        <tr>
                            <td>
                            天猫
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                            天猫
                            </td>
                            <td>
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                天猫
                            </td>
                            <td>
                            0
                            </td>
                            <td>
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                                天猫
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                            -- 
                            </td>
                        </tr>
                        <tr>
                            <td>
                            京东
                            </td>
                            <td>
                                0
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                            京东
                            </td>
                            <td>
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                京东
                            </td>
                            <td>
                            0
                            </td>
                            <td>
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                                京东
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                            -- 
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                            -- 
                            </td>
                        </tr>
                        <tr>
                            <td>
                                营养辅食
                            </td>
                            <td colspan="3">
                                4
                            </td>
                            <td>
                                <i style="color:red">↑</i>300%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                44.44%
                            </td>
                            <td>
                                <i style="color:red">↑</i>210.99%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                1.57
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-96.43%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                27.84%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-65.93%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                箱包
                            </td>
                            <td colspan="3">
                                3
                            </td>
                            <td>
                                <i style="color:red">↑</i>200%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                33.33%
                            </td>
                            <td>
                                <i style="color:red">↑</i>133.24%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                4.04
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i> -90.82%	
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                71.63%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-12.34%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                早教玩具
                            </td>
                            <td colspan="3">
                                2
                            </td>
                            <td>
                                <i style="color:red">↑</i>100%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                22.22%
                            </td>
                            <td>
                                <i style="color:red">↑</i>55.49%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0.03
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-99.93%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0.53%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i> -99.35%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                母婴用品
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                宝宝日用
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <!-- 店铺 -->
                        <tr>
                            <td rowspan="5">
                                张小二服饰
                            </td>
                            <td>
                                全类目
                            </td>
                            <td colspan="3">
                                9
                            </td>
                            <td>
                                <i style="color:red">↑</i>28.57%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                100%
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                5.64
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-89.53%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                100%
                            </td>
                            <td>
                                <!-- <i style="color:#2d9b00">↓</i>-65.93% -->
                                0%	
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                营养辅食
                            </td>
                            <td colspan="3">
                                4
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-20%	
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                44.44%
                            </td>
                            <td>
                                <i style="color:red">↑</i>6159.15%	
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                1.57
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-67.63%	
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                27.84%
                            </td>
                            <td>
                                <i style="color:red">↑</i>30833.33%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                箱包
                            </td>
                            <td colspan="3">
                                3
                            </td>
                            <td>
                                <i style="color:red">↑</i>200%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                33.33%
                            </td>
                            <td>
                                <i style="color:red">↑</i> 23707.14%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                4.04
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-19.2%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                71.63%
                            </td>
                            <td>
                                <i style="color:red">↑</i>79488.89%	
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                早教玩具
                            </td>
                            <td colspan="3">
                                2
                            </td>
                            <td>
                                <i style="color:red">↑</i>100%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                22.22%
                            </td>
                            <td>
                                <i style="color:red">↑</i>15771.43%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0.03
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-99.93%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0.53%
                            </td>
                            <td>
                                <i style="color:#2d9b00">↓</i>-35.37%
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                宝宝日用
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                        </tr>

                        <tr>
                            <td rowspan="5">
                            张小四宝宝日用品
                            </td>
                            <td>
                                全类目
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                100%
                            </td>
                            <td>
                            0%
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                            0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                100%
                            </td>
                            <td>
                                <!-- <i style="color:#2d9b00">↓</i>-65.93% -->
                                0%	
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                        <tr>
                            <td>
                                宝宝日用
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                                --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                            <td colspan="3">
                                0%
                            </td>
                            <td>
                            --
                            </td>
                            <td>
                                --
                            </td>
                        </tr>
                    </table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import {format} from "@/utils/datetime"
export default {
    components:{
        KtButton
    },
    data(){
        return{
            activeName:"first",
            filters:{},
            size:"small",
            pickerOptions: {
            shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    }
}
</script>

<style scoped>
.ground-route-table,
.ground-route-table-samll {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-collapse: collapse;
}
.ground-route-table td{
    border: 1px solid #dfe6ec;    
}
td{
    width: 600px;
    height: 30px;
}
.tableDiv{
   /* max-width: 3000px;
   overflow: auto;  */
}
</style>